import style from "./Article.module.scss";
import { useArticleRender } from "./useArticleRender";
import "highlight.js/styles/vs2015.css";
import useCopyCode from "./useCopyCode";

export default function Article() {
  const { article, articleHtml, articleToc } = useArticleRender();
 
  const { mardownRef } = useCopyCode();
 

  return (
    <div className={style["lx-article__wrap"]}>
      <div className={style["lx-article__header"]}>
        <img className={style["lx-article__cover"]} src={article.thumbnail} />
        <div className={style["lx-article__header--content"]}>
          <div className={style["lx-article__title"]}>{article.title}</div>
          <div className={`flex ${style["lx-article__desc-wrap"]}`}>
            <div className={`${style["lx-article__desc"]} flex`}>
              <div className={style["lx-article__autor"]}>
                <i
                  className={`iconfont icon-jiaoseguanli1 ${style["auth-icon"]}`}
                ></i>
                {article.createByName || "佚名"}
              </div>
              <span className={style["lx-article__header--line"]}>·</span>
              <div className={style["lx-article__time"]}>
                <i className={`iconfont icon-rili ${style["time-icon"]}`}></i>
                {article.createTime}
              </div>
              <span className={style["lx-article__header--line"]}>·</span>
              <div className={style["lx-article__viewcount"]}>
                <i className={`iconfont icon-ego-hot ${style["hot-icon"]}`}></i>
                {article.viewCount || 0}
              </div>
              <span className={style["lx-article__header--line"]}>·</span>
              <div
                className={`${style["lx-article__comment"]} ${style["comment-icon"]}`}
              >
                <i className="iconfont icon-pinglun1"></i>
                {article.commentCount || 0}
              </div>
              <span className={style["lx-article__header--line"]}>·</span>
              <div
                className={`${style["lx-article__star"]} ${style["star-icon"]}`}
              >
                <i className="iconfont icon-dianzan"></i>
                {article.star || 0}
              </div>
            </div>
            <div
              className={`${style["lx-article__category"]} flex flex--c ml-10`}
            >
              {article.categoryName && (
                <span style={{ marginRight: "12px" }}>
                  <i
                    className={`iconfont icon-leimupinleifenleileibie2 ${style["category-icon"]}`}
                  ></i>
                  {article.categoryName || ""}
                </span>
              )}
              {article.tagList?.length && (
                <span>
                  <i
                    className={`iconfont icon-biaoqian1 l${style["label-icon"]}`}
                  ></i>
                  {article.tagList
                    ? article.tagList
                        .slice(0, 2)
                        .map((item) => item.tagName)
                        .join(" ")
                    : ""}
                </span>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className={`${style["lx-article__body"]} article__md__box`}>
        <div className={style["lx-article__summary-wrap"]}>
          <div className={style["lx-article__summary-title"]}>
            <i className="pr-20">🌺</i>
            前言
          </div>
          <blockquote className={style["lx-article__summary"]}>
            {article.summary}
          </blockquote>
          <hr className="hr-line--g" style={{ borderColor: "#39c5bb" }} />
        </div>

        <div dangerouslySetInnerHTML={{ __html: articleToc }}></div>
        {/* <MarkdownRenderer value={articleHtml}></MarkdownRenderer> */}
        <div
          ref={mardownRef}
          dangerouslySetInnerHTML={{ __html: articleHtml }}
        ></div>
        <div className={style["article-update-time"]}>
          <span>文章最后更新于 {article.updateTime}</span>
        </div>
        <blockquote className={style["author-desc"]}>
          <div>作者：{article.createByName}</div>
          <div>版权声明：转载请注明文章出处</div>
        </blockquote>
      </div>
    </div>
  );
}
